<template>
    <div class="question-detail-wrap">
        <div class="question-info-wrap">
            <div class="question-info">
                <div class="label-wrap">
                    <div class="label">生活</div>
                    <div class="label">生活</div>
                    <div class="label">生活</div>
                </div>
                <div class="title">我是标题</div>
                <div class="descript">
                    我是问题的描述
                </div>
                <div class="op-btn">
                    <div class="btn-left">
                        <a-button type="primary">
                        关注问题
                        </a-button>
                        <a-button>
                            <a-icon type="edit" theme="filled" />写回答</a-button>
                        <a-button type="dashed">
                            <a-icon type="file-add" theme="filled" />邀请回答
                        </a-button>
                    </div>
                    <div class="btn-right">
                        <div class="agree">
                            <div class="icon">
                                <a-icon type="like" theme="filled" />
                                1000
                            </div>
                            是一个好问题
                        </div>
                        <div class="disagree">
                            <div class="icon">
                                <a-icon type="dislike" theme="filled" />
                                9999
                            </div>
                            不是一个好问题
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="question-answer-wrap">
            <div class="question-answer">
                <homeArticleCard></homeArticleCard>
                <homeArticleCard></homeArticleCard>
                <homeArticleCard></homeArticleCard>
                <homeArticleCard></homeArticleCard>
            </div>
        </div>
    </div>
</template>
  
  <script>
  import homeArticleCard from "@/components/homeArticleCard"
  export default {
    name: 'questionDetail',
    components: {
        homeArticleCard
    }
  }
  </script>
  
  <style scoped lang="less">
  .question-detail-wrap{
    .question-info-wrap{
        background-color: rgb(255, 255, 255);
        position: absolute;
        width: 100%;
        left: 0;
        top: 45px;
        display: flex;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        .question-info{
            width: 996px;
            padding: 16px;
        }
        .label-wrap{
            margin: 20px 0;
            .label{
                display: inline-block;
                color: blue;
                background-color: rgb(174, 198, 244);
                padding: 3px 5px;
                border-radius: 5px;
                margin-right: 10px;
            }
            .label:last-of-type{
                margin-right: 0;
            }
        }
        .title{
            font-size: 25px;
            font-weight: 600;
        }
        .descript{
            margin: 10px 0;
        }
        .op-btn{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .btn-left{
                button{
                    margin-right:10px;
                }
                button:last-of-type{
                    margin-right:0;
                }
            }
            .btn-right{
                display: flex;
            }
            .agree{
                margin-right: 20px;
            }
            .agree,.disagree{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .icon{
                    font-size: 20px;
                }
            }
        }
    }
    .question-answer-wrap{
        margin-top: 245px;
    }
  }
  </style>
  